<template>
    <div>
        <div>{{ $route.meta.title }}</div>
        <v-parent :prop1="n1" :prop2="n2" @dbclick.native="log1" @log222="log2" @log333="log3"></v-parent>
        <div>tongxin_name：{{ name_tongxin }}</div>
        <div>tongxin_n1：{{ n1 }}</div>
        <div>tongxin_n2：{{ n2 }}</div>
        <!-- 监听子组件的生命周期用@hook:mounted -->
         <div>tongxin_obj{{ obj }}</div>
    </div>
</template>
<script>
import vParent from "./Parents.vue";
export default {
    components: {
        vParent
    },
    data() {
        return {
            n1: 1,
            n2: 2,
            name_tongxin: "hello world",
            obj: {
                a: 1,
                b: 2
            }
        }
    },
    provide() {
        let that = this;
        return {
            age_provide: this.n1,
            log1_provide: this.log1,
            changeN1(x) {
                that.n1 += x
                console.log(x);
            },
            obj: this.obj
        }
    },
    methods: {
        log1() {
            console.log("tongxin1");
        },
        log2() {
            console.log("tongxin2");
        },
        log3() {
            console.log("tongxin3");
        }
    },
    mounted() {
        let that = this
        that.$bus.$on('change$bus', (str) => {
            this.name_tongxin = str;
            console.log('tongxin', that.name_tongxin);
        })
    }
}
</script>
<style></style>